<?php
//echo '<pre>';
$topic_list = $this->topics;
$search_val = $this->search_val;
$status = $this->status;
?>

<div id="alert" class="alert alert-success" style="display: none">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Well done!</strong> <span></span>
</div>
<div class="box span12">
<div class="box-header well" data-original-title="">
    <h2><i class="icon-user"></i> Topic Manager</h2>

    <form style="margin: 0px;" action="<?php echo $this->url('admin/child', array('controller' => 'topic')) ?>"
          method="get">
        <button type="submit" name="status" value="2" class="btn btn-danger pull-right" style="">
            <i class="icon-edit icon-white"></i>
            Chưa kiểm duyệt
        </button>
    </form>
    <a class="btn btn-primary pull-right" style=""
       href="<?php echo $this->url('admin/child', array('controller' => 'topic', 'action' => 'addnew')) ?>">
        <i class="icon-edit icon-white"></i>
        New Topic
    </a>
</div>
<div class="box-content">
    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">

        <!--start search  -->
        <div class="row-fluid">
            <div class="span4 pull-left">
                <div class="dataTables_filter" id="DataTables_Table_0_filter">
                    <!--search form -->
                    <form action="<?php echo $this->url('admin/child', array('controller' => 'topic')) ?>" method="get">
                        <label>Search:
                            <input type="text" value="<?php if (isset($search_val)) echo $search_val ?>"
                                   name="search_val" aria-controls="DataTables_Table_0">
                            <input type="submit" class="btn btn-primary pull-right" value="Search"/>
                        </label>
                    </form>
                    <!--end search form -->
                </div>
            </div>

            <div class="span8">

            </div>
        </div>
        <div style="clear: both"></div>
        <form id="form_action" method="post"
              action="<?php echo $this->url('admin/child', array('controller' => 'topic', 'action' => 'topicexcute')) ?>">
            <select id="action_all" name="action" class="pull-right">
                <option value="0">Hành động</option>
                <option value="unblock">Kiểm duyệt</option>
                <option value="block">Pending</option>
                <option value="delete">Xóa</option>
            </select>
            <div style="clear: both"> </div>
            </div>
            <!--end search  -->
            <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable"
                   id="DataTables_Table_0"
                   aria-describedby="DataTables_Table_0_info">
                <thead>
                <tr role="row">
                    <th class="sorting_asc center" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0"
                        rowspan="1" colspan="1"
                        aria-sort="ascending" aria-label="Username: activate to sort column descending"
                        style="width: 10px;"><input type="checkbox" id="checkall" style="opacity: 1!important;">
                    </th>
                    <th class="sorting_asc center" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0"
                        rowspan="1" colspan="1"
                        aria-sort="ascending" aria-label="Username: activate to sort column descending"
                        style="width: 201px;">Title
                    </th>
                    <th class="sorting center" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                        colspan="1"
                        aria-label="Date registered: activate to sort column ascending" style="width: 199px;">User Name
                    </th>
                    <th class="sorting center" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                        colspan="1"
                        aria-label="Role: activate to sort column ascending" style="width: 96px;">Expire Date
                    </th>
                    <th class="sorting center" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                        colspan="1"
                        aria-label="Status: activate to sort column ascending" style="width: 103px;">Status
                    </th>

                    <th class="sorting center" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                        colspan="1"
                        aria-label="Actions: activate to sort column ascending" style="width: 378px;">Actions
                    </th>
                </tr>
                </thead>

                <tbody role="alert" aria-live="polite" aria-relevant="all">
                <?php
                $i = 1;

                foreach ($topic_list as $topic) {
                    $class = "odd";
                    if ($i % 2 == 0)
                        $class = "event";
                    ?>
                    <tr class="<?php echo $class; ?>" id="<?php echo $topic->id; ?>">
                        <td>

                            <input class="checkbox" type="checkbox" name="id[]" value="<?php echo $topic->id; ?>"
                                   style="opacity: 1!important;">
                        </td>
                        <td class=" sorting_1"><?php echo \Velacolib\Utility\Utility::str_highlight($topic->title, $search_val) ?></td>
                        <td class="center "><?php echo \Velacolib\Utility\Utility::getInfoUser($topic->user_id, 'name'); ?></td>
                        <td class="center "><?php echo $topic->expire_date ?></td>
                        <td class="center ">
                            <?php echo $topic->status ?>
                        </td>
                        <!--  <td class="center ">
                            <?php echo \Velacolib\Utility\Utility::str_highlight($topic->short_description,$search_val);  ?>
                        </td>       -->
                        <td class="center ">
                            <a class="btn btn-success btn-view" id="<?php echo $topic->id ?>"
                               data-href="<?php echo $this->url('admin/child', array('controller' => 'topic', 'action' => 'detail', 'id' => $topic->id)) ?>">
                                <i class="icon-zoom-in icon-white"></i>
                                View
                            </a>
                            <a class="btn btn-info"
                               href="<?php echo $this->url('admin/child', array('controller' => 'topic', 'action' => 'edit', 'id' => $topic->id)) ?>">
                                <i class="icon-edit icon-white"></i>
                                Edit
                            </a>
                            <a class="btn btn-danger act-delete"
                               href="<?php echo $this->url('admin/child', array('controller' => 'topic', 'action' => 'delete', 'id' => $topic->id)) ?>">
                                <i class="icon-trash icon-white"></i>
                                Delete
                            </a>
                        </td>
                    </tr>
                <?php
                }
                $i++;
                ?>
                </tbody>
            </table>
        </form>
        <!--paginator -->
        <div class="row-fluid">
            <?php // add at the end of the file after the table
            $array_url = array(
                'route' => 'admin/child',
                'child_route' => array('controller' => 'topic', 'action' => 'index',
                    'search_val' => $search_val, 'status' => $status),
            );
            if (isset($search_val))
                $array_url['search_val'] = $search_val;
            if ($status == 2) $array_url['status'] = $status;


            echo $this->paginationControl(
            // the paginator object
                $topic_list,
                // the scrolling style; see http://zf2.readthedocs.org/en/release-2.1.4/modules/zend.paginator.usage.html#rendering-pages-with-view-scripts
                'sliding',
                // the partial to use to render the control
                array('partial/paginator.phtml', 'topic'),
                // the route to link to when a user clicks a control link
                $array_url
            );
            ?>
        </div>
        <!--end paginator -->

    </div>
</div>
<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <form action="/admin_abc_xyz/topic/excutedetail" name="view-form" class="ccform" id="ccform"  method="post" >
        <div class="modal-body">
           <div> <label>Short - Description</label>
               <textarea name="short_description" style="width: 100%" rows="5" id="short-desc"></textarea></div>
            <div><label>Full - Description</label>
                <textarea name="full_description" style="width: 100%" rows="5" id="full-desc"></textarea>  <div>
            <label>Image</label>
            <div class="img-thumbnail">

            </div>
                    <input type="hidden" name="topic-id" id="topic-id" value="">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <button name="unblock" type="submit" id="unblock" value="yes"  class="btn btn-primary excute_topic">Duyệt
                topic</button>
        </div>
    </form>
</div>

<script>
    $(document).ready(function () {
        $('.btn-view').click(function (e) {
            e.preventDefault();
            var id = $(this).attr('id');
            var url = $(this).attr('data-href');
            //alert(url);
            var _modal = $("#myModal");
            $.ajax({
                url: url,
                data: {id: id},
                type: "POST",
                beforeSend: function () {
                    $(_modal).find("h3").text('');
                    $(_modal).find(".excute_topic").attr('data-id', '');
                    $(_modal).find(".modal-body textarea#short-desc").text('');
                    $(_modal).find(".modal-body textarea#full-desc").text('');
                    $(_modal).find(".img-thumbnail").html('');
                    $(_modal).find("#topic-id").val('');

                    $(".overlay").show();
                },
                success: function (jdata) {
                    // do stuff with the result, if you want to
                    jdata = JSON.parse(jdata);
                    console.log(jdata);

                    
                    $(_modal).find("h3").text(jdata['topic']['title']);
                    $(_modal).find(".excute_topic").attr('data-id', jdata['topic']['id']);
                    $(_modal).find(".modal-body textarea#short-desc").text(jdata['topic']['short_description']);
                    $(_modal).find(".modal-body textarea#full-desc").text(jdata['topic']['full_description']);
                    $(_modal).find(".img-thumbnail").append('<img src="' + jdata['topic']['images'] + '" />');
                    $(_modal).find("#topic-id").val(jdata['topic']['id']);
                    if (jdata['topic_img'] != '') {
                        $.each(jdata['topic_img'], function (key, val) {
                            //not show img gellary item [0] (the first img)
                            if(key!=0){
                                var img = '<img src="' + val + '" />';
                                $(_modal).find(".img-thumbnail").append(img);
                            }
                        });
                    }
                    $(".overlay").hide();
                    $('#myModal').modal('show');

                }
            });


        });

        /*
         *  excute topic action
         * */
        $('form.ccform').submit(function(){
            $(".overlay").show();
            var url = $(this).attr('action');

            $.ajax({
                url: url,
                data: $(this).serialize(),
                type: "POST",
                dataType: 'html',
                success: function (jdata) {
                    $(".overlay").hide();
                    // do stuff with the result, if you want to
                    jdata = JSON.parse(jdata);
                    console.log(jdata);
                    var div_alert = $("#alert");
                   $(div_alert).find("span").text(jdata['message']);
                  $('#myModal').modal('hide');
                  $(div_alert).fadeIn(1000);

                 setTimeout(window.location.reload(), 10000);

                }
            });
            return false;
        });
        $("#action_all").on("change", function () {
            var $form = $("#form_action");
            var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
            $.ajax({
                url: $form.attr("action"),
                data: $form.serialize(),
                type: method,
                beforeSend: function () {
                    $(".overlay").show();
                },
                success: function (jdata) {
                    // do stuff with the result, if you want to
                    jdata = JSON.parse(jdata);
                    // console.log(jdata);
                    alert(jdata['message']);
                    $(".overlay").hide();
                    window.location.reload();
                }
            });
        });
        $('#checkall').click(function (event) {  //on click
            if (this.checked) { // check select status
                $('.checkbox').each(function () { //loop through each checkbox
                    this.checked = true;  //select all checkboxes with class "checkbox1"
                });
            } else {
                $('.checkbox').each(function () { //loop through each checkbox
                    this.checked = false; //deselect all checkboxes with class "checkbox1"
                });
            }
        });

    });

</script>
